<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link	href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css"	rel="stylesheet">
<link   href="${pageContext.request.contextPath}/themes/icon.css"	rel="stylesheet">
<script src="${pageContext.request.contextPath}/js/jquery-1.7.2.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<script	src="${pageContext.request.contextPath}/js/jquery.backstretch.js"></script>
</head>
<script type="text/javascript">

   $(function(){
    	
		//设置全屏背景图片
		
		$.backstretch("${pageContext.request.contextPath}/img/backgrounds/2.jpg")
		
		//默认更新对话框是关闭的
		$("#updateEmp").dialog('close');
		
		
		 //配置下拉框
		   $("#deptType").combobox({
			   editable : false
		   });
		 
		//配置修改表单
		
		$("#upEmp").form({    
			    url:'${pageContext.request.contextPath}/updateEmployee',      
			    success:function(data){    
			        if(data=="1"){
			        	$("#updateEmp").dialog('close');
			        	$("#upEmp").form('clear');
			        	$.messager.alert('我的消息','更新成功','info',function(){
							$('#employeeMsg').datagrid('reload');
						});
			        }else{
			        	
			        }  
			    }    
			});
		

		// 配置搜索框	
	   $('#searchEmployee').searchbox({
	    	searcher : function(value, name) { 
				$('#employeeMsg').datagrid('reload', {
					searchname : value,
					searchtype : name
				});
	    		    },  
	    		    menu:'#mm',  
	    	        prompt:'请输入要查询的值...'    
      });
		
        // 配置取消搜索     传个空值过去
        $("#cancleSearch").click(function(){
        	$('#searchEmployee').searchbox('clear');
        	$('#employeeMsg').datagrid('reload', {
        		
			});   			
        });
		
		
		//配置数据表格
		$('#employeeMsg').datagrid({
			url : '${pageContext.request.contextPath}/selectEmyployee',
			columns : [ [ {
				field : 'e_id',
				title : '员工表编号',
				width : 60,
				hidden : true
			},{
				field : 'checked',
				checkbox : true,
				width : 150
			}, {
				field : 'e_number',
				title : '编号',
				width : 60,
				align : 'center'
			}, {
				field : 'e_name',
				title : '姓名',
				width : 60,
				align : 'center'
			}, {
				field : 'e_sex',
				title : '性别',
				width : 60,
				align : 'center'
			},{
				field : 'e_age',
				title : '年龄',
				width : 60,
				align : 'center'
			},{
				field : 'e_tel',
				title : '电话',
				width : 110,
				align : 'center'
			},{
				field : 'e_email',
				title : '邮箱',
				width : 110,
				align : 'center'
			},{
				field : 'e_address',
				title : '地址',
				width : 80,
				align : 'center'
			},{
				field : 'e_birthday',
				title : '生日',
				width : 100,
				align : 'center'
			},{
				field : 'e_entrydate',
				title : '进入公司时间',
				width : 100,
				align : 'center'
			},{
				field : 'e_description',
				title : '员工描述',
				width : 160,
				align : 'center'
			},{
				field : 'dept_name',
				title : '所属部门',
				width : 60,
				align : 'center'
			},{
				field : 'dept_id',
				title : '部门编号',
				width : 60,
				align : 'center',
				hidden : true
			},] ],
			toolbar : [ {
				iconCls : 'icon-edit',
				text : '修改员工',
				handler : function() {
					var stus = $("#employeeMsg").datagrid('getSelections');
					if(stus.length != 1){
						$.messager.alert('提示','请选择一条数据','info',function(){    
						     
						    	$("#employeeMsg").datagrid('unselectAll');   
						})
					}else{
						$("#updateEmp").dialog('open');
						var employee = stus[0];
						 $('#upEmp').form('load',employee);
					}
				}
			} ],
			pagination : true,
			striped : true,
			rownumbers : true,
			fitColumns : true,
			autoRowHeight : true,
			resizeHandle : 'right',
			nowrap : true
		});
		
		  //配置自定义验证框
		   $.extend($.fn.validatebox.defaults.rules, {    
			   mobile: {// 验证手机号码
	               validator: function (value) {
	                   return /^(13|15|18|14)\d{9}$/i.test(value);
	               },
	               message: '手机号码格式不正确'
			   },
			   age: {// 验证年龄
	               validator: function (value) {
	                   return /^\d{2}$/i.test(value);
	               },
	               message: '年龄格式不正确'
			   },
			   number:{
				   validator: function (value) {
					   var error=false;
					  if(!/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{2,8}$/.test(value)){
						  $.fn.validatebox.defaults.rules.number.message ="编号格式不正确";
						  return false;
					  }   
					   //验证员工编号是否存在
		               /* $("#span").text("");
					   var e_number = $(this).val();
					   var exist =  $.ajax({
							type : 'post',
							url : '${pageContext.request.contextPath}/validatee_number',
							data : {
								'e_number' : e_number
							},
							async:false,
							//定义返回的数据类型
							dataType : "tex",
							//请求成功时调用的函数
							success : function(data) {
								$("#span").text(data.msg);
							}    
						}).responseText;
					   if(exist=="存在"){
						   $.fn.validatebox.defaults.rules.number.message ="该员工编号已存在";
							  return false;
					   } */
					   return true;
				   },
				   message: ''
			   },
			   password: {// 验证密码
	               validator: function (value) {
	                   return /^\S{2,8}$/i.test(value);
	               },
	               message: '密码格式不正确'
			   },
			   address: {// 验证地址
	               validator: function (value) {
	                   return /^\S{2,30}$/i.test(value);
	               },
	               message: '地址太少或超出范围'
			   },
			  description : {// 验证描述
	              validator: function (value) {
	                  return /^\S{2,30}$/i.test(value);
	              },
	              message: '描述太少或超出范围'
			   }
			}); 
		
    });
    //配置修改表单提交事件
    function updataForm() {
		$("#upEmp").form('submit');
	}
   //配置表单清空内容事件
	function clearForm() {
		$("#upEmp").form('clear');
	}
</script>
<body> 

    <div style="margin-top: 35px"></div>
	<input id="searchEmployee" class="easyui-searchbox"
		data-options="prompt:'输入查询信息',width:250,height:30,menu:'#mm'" >
		<div id="mm" style="width:120px">
		    <div data-options="name:'byname',iconCls:'icon-ok'" id="byname">按名字查询</div>
		    <div data-options="name:'bydept',iconCls:'icon-save'" id="bydept">按部门查询</div>
		</div>
		<a id="cancleSearch" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back',height:30">返回</a> 

         
         <p style="text-align: center;font-family: inherit;font-size: 25px">员工信息一览表</p>
         <table id="employeeMsg" title="员工信息表"></table>
      
        <!-- 修改的对话框 -->
	<div id="updateEmp" class="easyui-dialog" title="修改员工信息" 
	 style="width: 700px; height: 450px;background-color: #E0EEEE;" data-options="modal:true">
	     <p style="font-size: 22px;font-family: fantasy;color:#8470FF;margin-left: 152px ">
	                请重新编辑该员工信息--</p>
		 <form id="upEmp" method="post" style="text-align: center;margin-top: 30px">
			<div style="margin-bottom: 15px">
			        <div style="display: none;">
			        <span>员工id:</span><input class="easyui-textbox" name="e_id"
						style="width: 20%;display: none;" data-options=""></div>
					<span>员工编号:</span><input class="easyui-textbox" name="e_number"
						style="width: 20%" data-options="iconCls:'icon-sum',required: true,validType:'number',missingMessage:'员工编号请必须填写'">
					<span>员工姓名:</span><input class="easyui-textbox" name="e_name"
						style="width: 20%" data-options="iconCls:'icon-man',required: true,missingMessage:'员工姓名请必须填写'">	
				</div>
				<div style="margin-bottom: 15px">
					<span>员工性别:</span>
					男:<input  name="e_sex" type="radio" value="男" style="width: 6%" >
					 女:<input  name="e_sex" type="radio" value="女" style="width: 6%" >
				    <span>员工年龄:</span><input class="easyui-textbox" name="e_age"
						style="width: 20%" data-options="required: true,validType:'age',missingMessage:'员工年龄请必须填写'">
				</div>
				<div style="margin-bottom: 15px">
					<span>员工电话:</span><input class="easyui-textbox" name="e_tel"
						style="width: 20%" data-options="iconCls:'icon-print',required: true,validType:'mobile',missingMessage:'员工电话请必须填写'">
					<span>员工邮箱:</span><input class="easyui-textbox" name="e_email"
						style="width: 20%" data-options="iconCls:'icon-mini-add',required:true,validType:'email',missingMessage:'员工邮箱请必须填写'">	
				</div>
				<div style="margin-bottom: 15px">
					<span>员工地址:</span><input class="easyui-textbox" name="e_address"
						style="width: 20%" data-options="iconCls:'icon-tip',required: true,validType:'address',missingMessage:'员工地址请必须填写'">
					<span>员工生日:</span><input class="easyui-datebox" name="e_birthday"
						style="width: 20%" data-options="editable:false">	
				</div>
				<div style="margin-bottom: 15px">
					<span>进入时间:</span><input class="easyui-datebox" name="e_entrydate"
						style="width: 20%" data-options="editable:false">
					<span>所属部门:</span>
					 <select id="deptType" class="easyui-combobox" name="dept_id" style="width:20%;">   
					             <c:forEach items="${dept}" var="deptType">
					                   <option id="types" value="${deptType.dept_id}">${deptType.dept_name}</option>   
					              </c:forEach>   
					   </select>  	
				</div>
				<div style="margin-bottom: 15px">
					<span>员工工作描述:</span><input class="easyui-textbox" name="e_description"
					    style="width: 20%;height: 45px" data-options="required:true,validType:'description',missingMessage:'员工描述请必须填写'">
				</div>
		</form>
		<div style="text-align: center; padding: 15px">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick="updataForm()" style="width: 80px">提交</a> 
            <a href="javascript:void(0)" class="easyui-linkbutton" 
               onclick="clearForm()" style="width:80px">清除</a>
        </div>
	</div>
</body>
</html>